<template>
  <transition name="fade">
    <div v-if="visible" class="toast-container">
      <div class="toast-message">{{ message }}</div>
    </div>
  </transition>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  name: 'MMessage',
  props: {
    message: {
      type: String,
      required: true
    },
    duration: {
      type: Number,
      default: 3000
    }
  },
  setup(props) {
    const visible = ref(false);
    const timer = ref(null);

    const showToast = () => {
      visible.value = true;
      timer.value = setTimeout(() => {
        visible.value = false;
      }, props.duration);
    };

    onMounted(() => {
      showToast();
    });

    onUnmounted(() => {
      if (timer.value) {
        clearTimeout(timer.value);
      }
    });

    return {
      visible
    };
  }
};
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.toast-container {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: flex;
  align-items: center;
}

.toast-message {
  max-width: 300px;
  text-align: center;
}
</style>